<template>
  <div class="create-order-container agri-page-container">
    <div class="page-header agri-page-header">
      <div class="page-title agri-page-title">
        <el-icon><ShoppingCart /></el-icon>
        <span>创建订单</span>
      </div>
    </div>

    <!-- 订单创建流程 -->
    <el-card class="steps-card" agri-card agri-card>
      <el-steps :active="currentStep" finish-status="success" simple>
        <el-step title="选择农户和商品" />
        <el-step title="填写订单信息" />
        <el-step title="确认订单" />
        <el-step title="完成" />
      </el-steps>
    </el-card>

    <!-- 第一步：选择农户和商品 -->
    <el-card v-if="currentStep === 0" class="step-card" agri-card agri-card>
      <template #header>
        <div class="card-header">
          <div class="card-title">选择农户和商品</div>
          <div class="card-actions">
            <el-input
              v-model="searchQuery"
              placeholder="搜索农户或产品"
              clearable
              class="search-input"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </div>
      </template>

      <!-- 农户列表 -->
      <div class="farmer-selector">
        <div class="section-title">选择农户</div>
        <div v-if="loadingFarmers" class="loading-container">
          <el-skeleton :rows="3" animated />
        </div>
        <div v-else-if="farmers.length === 0" class="empty-data">
          <el-empty description="暂无可选农户" />
        </div>
        <div v-else class="farmer-list">
          <div 
            v-for="farmer in filteredFarmers" 
            :key="farmer.id" 
            class="farmer-item"
            :class="{ 'selected': selectedFarmerId === farmer.id }"
            @click="selectFarmer(farmer)"
          >
            <el-avatar :size="40" :src="farmer.avatar">
              {{ farmer.name ? farmer.name.substring(0, 1) : 'F' }}
            </el-avatar>
            <div class="farmer-info">
              <div class="farmer-name">{{ farmer.name }}</div>
              <div class="farmer-rating">
                <el-rate v-model="farmer.rating" disabled :colors="colors" size="small" />
                <span class="farmer-address">{{ farmer.address }}</span>
              </div>
            </div>
            <el-icon v-if="selectedFarmerId === farmer.id" class="selected-icon"><Check /></el-icon>
          </div>
        </div>
      </div>

      <!-- 商品列表 -->
      <div class="product-selector" v-loading="loadingProducts">
        <div class="section-title">选择商品</div>
        <div v-if="!selectedFarmerId" class="select-farmer-first">
          <el-empty description="请先选择农户" :image-size="80" />
        </div>
        <div v-else-if="products.length === 0" class="empty-data">
          <el-empty description="该农户暂无可选商品" />
        </div>
        <div v-else class="product-grid">
          <el-row :gutter="20">
            <el-col v-for="product in filteredProducts" :key="product.id" :xs="24" :sm="12" :md="8" :lg="6">
              <el-card 
                class="product-card" agri-card agri-card 
                :class="{ 'selected': selectedProductId === product.id }"
                @click="selectProduct(product)"
                shadow="hover"
              >
                <div class="product-image-container">
                  <img 
                    :src="product.image || defaultProductImage" 
                    class="product-image" 
                    alt="产品图片" 
                  />
                  <div v-if="selectedProductId === product.id" class="selected-marker">
                    <el-icon><Check /></el-icon>
                  </div>
                </div>
                <div class="product-info">
                  <h3 class="product-name">{{ product.name }}</h3>
                  <p class="product-price">¥{{ product.price }} / {{ product.unit }}</p>
                  <p class="product-stock">库存: {{ product.stock }} {{ product.unit }}</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="steps-action">
        <el-button @click="goBack">返回</el-button>
        <el-button type="primary" @click="nextStep" :disabled="!selectedProductId">下一步</el-button>
      </div>
    </el-card>

    <!-- 第二步：填写订单信息 -->
    <el-card v-if="currentStep === 1" class="step-card" agri-card agri-card>
      <template #header>
        <div class="card-header">
          <div class="card-title">填写订单信息</div>
        </div>
      </template>

      <div class="selected-product-info">
        <div class="selected-product-image">
          <img 
            :src="selectedProduct ? (selectedProduct.image || defaultProductImage) : defaultProductImage" 
            alt="产品图片" 
          />
        </div>
        <div class="selected-product-details">
          <h3>{{ selectedProduct ? selectedProduct.name : '未选择商品' }}</h3>
          <p class="product-price">¥{{ selectedProduct ? selectedProduct.price : 0 }} / {{ selectedProduct ? selectedProduct.unit : '' }}</p>
          <p class="farmer-name">农户: {{ selectedFarmer ? selectedFarmer.name : '未选择农户' }}</p>
        </div>
      </div>

      <el-form
        ref="orderFormRef"
        :model="orderForm"
        :rules="orderRules"
        label-width="100px"
        label-position="right"
        class="order-form"
      >
        <el-form-item label="收货人" prop="receiverName">
          <el-input v-model="orderForm.receiverName" placeholder="请输入收货人姓名" />
        </el-form-item>

        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="orderForm.phone" placeholder="请输入联系电话" />
        </el-form-item>

        <el-form-item label="收货地址" prop="address">
          <el-input v-model="orderForm.address" type="textarea" :rows="2" placeholder="请输入详细地址" />
        </el-form-item>

        <el-form-item label="购买数量" prop="quantity">
          <el-input-number
            v-model="orderForm.quantity"
            :min="1"
            :max="selectedProduct ? selectedProduct.stock : 999"
            :step="1"
            @change="calculateTotal"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="配送方式" prop="deliveryMethod">
          <el-radio-group v-model="orderForm.deliveryMethod">
            <el-radio label="express">快递配送</el-radio>
            <el-radio label="self">自提</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="支付方式" prop="paymentMethod">
          <el-radio-group v-model="orderForm.paymentMethod">
            <el-radio label="online">在线支付</el-radio>
            <el-radio label="cod">货到付款</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="订单备注" prop="note">
          <el-input v-model="orderForm.note" type="textarea" :rows="3" placeholder="备注信息（选填）" />
        </el-form-item>
      </el-form>

      <div class="steps-action">
        <el-button @click="prevStep">上一步</el-button>
        <el-button type="primary" @click="validateOrderForm">下一步</el-button>
      </div>
    </el-card>

    <!-- 第三步：确认订单 -->
    <el-card v-if="currentStep === 2" class="step-card" agri-card agri-card>
      <template #header>
        <div class="card-header">
          <div class="card-title">确认订单</div>
        </div>
      </template>

      <div class="order-summary">
        <div class="summary-section">
          <h3 class="summary-title">商品信息</h3>
          <div class="summary-content">
            <div class="product-summary">
              <div class="product-summary-image">
                <img 
                  :src="selectedProduct ? (selectedProduct.image || defaultProductImage) : defaultProductImage" 
                  alt="产品图片" 
                />
              </div>
              <div class="product-summary-details">
                <div class="product-summary-name">{{ selectedProduct ? selectedProduct.name : '未选择商品' }}</div>
                <div class="product-summary-price">¥{{ selectedProduct ? selectedProduct.price : 0 }} / {{ selectedProduct ? selectedProduct.unit : '' }}</div>
                <div class="product-summary-quantity">× {{ orderForm.quantity }}</div>
              </div>
              <div class="product-summary-subtotal">
                ¥{{ orderTotal }}
              </div>
            </div>
          </div>
        </div>

        <div class="summary-section">
          <h3 class="summary-title">卖家信息</h3>
          <div class="summary-content">
            <div class="seller-info">
              <span class="info-label">农户名称:</span>
              <span class="info-value">{{ selectedFarmer ? selectedFarmer.name : '未选择农户' }}</span>
            </div>
            <div class="seller-info">
              <span class="info-label">联系电话:</span>
              <span class="info-value">{{ selectedFarmer ? selectedFarmer.phone : '无' }}</span>
            </div>
            <div class="seller-info">
              <span class="info-label">所在地区:</span>
              <span class="info-value">{{ selectedFarmer ? selectedFarmer.address : '无' }}</span>
            </div>
          </div>
        </div>

        <div class="summary-section">
          <h3 class="summary-title">收货信息</h3>
          <div class="summary-content">
            <div class="delivery-info">
              <span class="info-label">收货人:</span>
              <span class="info-value">{{ orderForm.receiverName }}</span>
            </div>
            <div class="delivery-info">
              <span class="info-label">联系电话:</span>
              <span class="info-value">{{ orderForm.phone }}</span>
            </div>
            <div class="delivery-info">
              <span class="info-label">收货地址:</span>
              <span class="info-value">{{ orderForm.address }}</span>
            </div>
            <div class="delivery-info">
              <span class="info-label">配送方式:</span>
              <span class="info-value">{{ orderForm.deliveryMethod === 'express' ? '快递配送' : '自提' }}</span>
            </div>
          </div>
        </div>

        <div class="summary-section">
          <h3 class="summary-title">支付信息</h3>
          <div class="summary-content">
            <div class="payment-info">
              <span class="info-label">支付方式:</span>
              <span class="info-value">{{ orderForm.paymentMethod === 'online' ? '在线支付' : '货到付款' }}</span>
            </div>
            <div class="payment-info">
              <span class="info-label">商品金额:</span>
              <span class="info-value">¥{{ orderTotal }}</span>
            </div>
            <div class="payment-info">
              <span class="info-label">运费:</span>
              <span class="info-value">¥{{ deliveryFee }}</span>
            </div>
            <div class="payment-info total-amount">
              <span class="info-label">订单总额:</span>
              <span class="info-value">¥{{ (parseFloat(orderTotal) + parseFloat(deliveryFee)).toFixed(2) }}</span>
            </div>
          </div>
        </div>

        <div class="summary-section" v-if="orderForm.note">
          <h3 class="summary-title">订单备注</h3>
          <div class="summary-content note-content">
            {{ orderForm.note }}
          </div>
        </div>
      </div>

      <div class="steps-action">
        <el-button @click="prevStep">上一步</el-button>
        <el-button type="primary" @click="submitOrder" :loading="submitting">提交订单</el-button>
      </div>
    </el-card>

    <!-- 第四步：完成 -->
    <el-card v-if="currentStep === 3" class="step-card success-card" agri-card agri-card>
      <div class="success-info">
        <el-icon class="success-icon"><CircleCheck /></el-icon>
        <h2 class="success-title">订单创建成功</h2>
        <p class="success-text">订单号: {{ createdOrderId }}</p>
        <p class="success-tip">您可以在订单管理中查看订单详情</p>
        <div class="success-actions">
          <el-button type="primary" @click="goToOrderList">查看订单</el-button>
          <el-button @click="createNewOrder">继续购买</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { 
  ShoppingCart, Search, Check, CircleCheck
} from '@element-plus/icons-vue';
import { useBuyerStore } from '../../store';

// 路由和状态管理
const router = useRouter();
const buyerStore = useBuyerStore();
const defaultProductImage = 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png';

// 步骤控制
const currentStep = ref(0);
const colors = ['#99A9BF', '#F7BA2A', '#FF9900'];

// 表单引用
const orderFormRef = ref(null);

// 数据列表
const loadingFarmers = ref(false);
const loadingProducts = ref(false);
const farmers = ref([]);
const products = ref([]);
const searchQuery = ref('');

// 选择状态
const selectedFarmerId = ref('');
const selectedProductId = ref('');
const selectedFarmer = ref(null);
const selectedProduct = ref(null);

// 订单表单
const orderForm = reactive({
  receiverName: '',
  phone: '',
  address: '',
  quantity: 1,
  deliveryMethod: 'express',
  paymentMethod: 'online',
  note: ''
});

// 提交状态
const submitting = ref(false);
const createdOrderId = ref('');

// 订单表单验证规则
const orderRules = {
  receiverName: [
    { required: true, message: '请输入收货人姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入收货地址', trigger: 'blur' },
    { min: 5, max: 100, message: '地址长度在 5 到 100 个字符', trigger: 'blur' }
  ],
  quantity: [
    { required: true, message: '请输入购买数量', trigger: 'blur' },
    { type: 'number', min: 1, message: '数量必须大于0', trigger: 'blur' }
  ],
  deliveryMethod: [
    { required: true, message: '请选择配送方式', trigger: 'change' }
  ],
  paymentMethod: [
    { required: true, message: '请选择支付方式', trigger: 'change' }
  ]
};

// 计算订单总额
const orderTotal = computed(() => {
  if (!selectedProduct.value || !orderForm.quantity) return '0.00';
  return (selectedProduct.value.price * orderForm.quantity).toFixed(2);
});

// 计算运费
const deliveryFee = computed(() => {
  // 简单的运费计算逻辑，实际项目中可以根据距离、重量等计算
  if (orderForm.deliveryMethod === 'self') {
    return '0.00';
  }
  return '10.00';
});

// 过滤农户列表
const filteredFarmers = computed(() => {
  if (!farmers.value.length) return [];
  if (!searchQuery.value) return farmers.value;
  
  const query = searchQuery.value.toLowerCase();
  return farmers.value.filter(farmer => 
    farmer.name.toLowerCase().includes(query)
  );
});

// 过滤商品列表
const filteredProducts = computed(() => {
  if (!products.value.length) return [];
  if (!searchQuery.value) return products.value;
  
  const query = searchQuery.value.toLowerCase();
  return products.value.filter(product => 
    product.name.toLowerCase().includes(query)
  );
});

// 选择农户
const selectFarmer = async (farmer) => {
  selectedFarmerId.value = farmer.id;
  selectedFarmer.value = farmer;
  
  // 加载农户的产品
  loadingProducts.value = true;
  try {
    const productsData = await mockGetFarmerProducts(farmer.id);
    products.value = productsData;
    // 重置产品选择
    selectedProductId.value = '';
    selectedProduct.value = null;
  } catch (error) {
    console.error('加载农户产品失败', error);
    products.value = [];
    ElMessage.error('加载农户产品失败');
  } finally {
    loadingProducts.value = false;
  }
};

// 选择商品
const selectProduct = (product) => {
  selectedProductId.value = product.id;
  selectedProduct.value = product;
  
  // 重置数量
  orderForm.quantity = 1;
};

// 计算总金额
const calculateTotal = () => {
  // 总金额通过计算属性自动更新
};

// 验证订单表单
const validateOrderForm = async () => {
  if (!orderFormRef.value) return;
  
  await orderFormRef.value.validate((valid) => {
    if (valid) {
      nextStep();
    } else {
      ElMessage.warning('请填写必要的订单信息');
    }
  });
};

// 提交订单
const submitOrder = async () => {
  try {
    submitting.value = true;
    
    // 准备订单数据
    const orderData = {
      farmerId: selectedFarmer.value.id,
      farmerName: selectedFarmer.value.name,
      farmerPhone: selectedFarmer.value.phone,
      productId: selectedProduct.value.id,
      productName: selectedProduct.value.name,
      quantity: orderForm.quantity,
      unit: selectedProduct.value.unit,
      price: selectedProduct.value.price,
      totalAmount: (parseFloat(orderTotal.value) + parseFloat(deliveryFee.value)).toFixed(2),
      receiverName: orderForm.receiverName,
      phone: orderForm.phone,
      address: orderForm.address,
      deliveryMethod: orderForm.deliveryMethod,
      paymentMethod: orderForm.paymentMethod,
      note: orderForm.note
    };
    
    // 创建订单
    const result = await buyerStore.createOrder(orderData);
    createdOrderId.value = result.orderNumber || '未知订单号';
    
    ElMessage.success('订单创建成功');
    nextStep();
  } catch (error) {
    console.error('提交订单失败', error);
    ElMessage.error('提交订单失败: ' + (error.message || '未知错误'));
  } finally {
    submitting.value = false;
  }
};

// 前往订单列表
const goToOrderList = () => {
  router.push('/main/buyer/orders');
};

// 创建新订单
const createNewOrder = () => {
  // 重置所有数据
  selectedFarmerId.value = '';
  selectedProductId.value = '';
  selectedFarmer.value = null;
  selectedProduct.value = null;
  products.value = [];
  
  Object.assign(orderForm, {
    receiverName: '',
    phone: '',
    address: '',
    quantity: 1,
    deliveryMethod: 'express',
    paymentMethod: 'online',
    note: ''
  });
  
  currentStep.value = 0;
};

// 返回上一步
const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};

// 进入下一步
const nextStep = () => {
  if (currentStep.value < 3) {
    currentStep.value++;
  }
};

// 返回订单列表
const goBack = () => {
  router.push('/main/buyer/orders');
};

// 模拟获取农户产品数据
const mockGetFarmerProducts = async (farmerId) => {
  // 实际项目应该调用API获取农户产品
  // 模拟延迟
  await new Promise(resolve => setTimeout(resolve, 500));
  
  // 返回模拟数据
  return [
    {
      id: 'p1',
      name: '有机大米',
      price: 12.5,
      unit: 'kg',
      stock: 500,
      image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      description: '优质有机大米，纯天然种植',
      farmerId
    },
    {
      id: 'p2',
      name: '新鲜蔬菜',
      price: 8.8,
      unit: 'kg',
      stock: 200,
      image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      description: '时令新鲜蔬菜',
      farmerId
    },
    {
      id: 'p3',
      name: '红富士苹果',
      price: 15.0,
      unit: 'kg',
      stock: 300,
      image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
      description: '鲜甜多汁的红富士苹果',
      farmerId
    }
  ];
};

// 获取农户列表
const fetchFarmers = async () => {
  loadingFarmers.value = true;
  try {
    const farmersData = await buyerStore.fetchFarmers();
    farmers.value = farmersData;
  } catch (error) {
    console.error('获取农户列表失败', error);
    ElMessage.error('获取农户列表失败');
    farmers.value = [];
  } finally {
    loadingFarmers.value = false;
  }
};

// 组件挂载时获取数据
onMounted(() => {
  fetchFarmers();
});
</script>

<style scoped>
.create-order-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 22px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.page-title .el-icon {
  margin-right: 8px;
  font-size: 24px;
  color: var(--primary-color);
}

.steps-card {
  margin-bottom: 20px;
}

.step-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-weight: bold;
  font-size: 16px;
}

.search-input {
  width: 250px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-left: 15px;
  border-left: 4px solid var(--primary-color);
}

.farmer-selector {
  margin-bottom: 30px;
}

.farmer-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.farmer-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  width: calc(25% - 15px);
  min-width: 250px;
}

.farmer-item:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.farmer-item.selected {
  border-color: var(--primary-color);
  background-color: var(--primary-color-bg);
}

.farmer-info {
  margin-left: 15px;
  flex: 1;
}

.farmer-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.farmer-rating {
  display: flex;
  align-items: center;
}

.farmer-address {
  margin-left: 10px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

.selected-icon {
  color: var(--primary-color);
  font-size: 20px;
}

.product-grid {
  margin-bottom: 20px;
}

.product-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.product-card.selected {
  border-color: var(--primary-color);
}

.product-image-container {
  height: 150px;
  overflow: hidden;
  position: relative;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selected-marker {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-info {
  padding: 15px;
}

.product-name {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price {
  color: #f56c6c;
  font-weight: bold;
  margin-bottom: 5px;
}

.product-stock {
  color: var(--el-text-color-secondary);
  font-size: 12px;
}

.select-farmer-first {
  padding: 30px 0;
  text-align: center;
}

.steps-action {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  gap: 20px;
}

.selected-product-info {
  display: flex;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.selected-product-image {
  width: 80px;
  height: 80px;
  margin-right: 20px;
}

.selected-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.selected-product-details h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.order-form {
  max-width: 600px;
  margin: 0 auto;
}

.order-summary {
  margin-bottom: 30px;
}

.summary-section {
  margin-bottom: 20px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 4px;
  overflow: hidden;
}

.summary-title {
  margin: 0;
  padding: 15px;
  font-size: 16px;
  background-color: #f5f7fa;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.summary-content {
  padding: 15px;
}

.product-summary {
  display: flex;
  align-items: center;
}

.product-summary-image {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}

.product-summary-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.product-summary-details {
  flex: 1;
}

.product-summary-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.product-summary-price {
  color: #606266;
  font-size: 13px;
}

.product-summary-quantity {
  color: #606266;
  font-size: 13px;
}

.product-summary-subtotal {
  font-weight: bold;
  font-size: 16px;
  color: #f56c6c;
}

.seller-info,
.delivery-info,
.payment-info {
  margin-bottom: 10px;
  display: flex;
}

.info-label {
  width: 100px;
  color: #606266;
}

.info-value {
  flex: 1;
}

.total-amount {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed var(--el-border-color);
}

.total-amount .info-value {
  font-size: 20px;
  font-weight: bold;
  color: #f56c6c;
}

.note-content {
  white-space: pre-wrap;
  color: #606266;
}

.success-card {
  text-align: center;
}

.success-info {
  padding: 40px 0;
}

.success-icon {
  font-size: 80px;
  color: #67c23a;
  margin-bottom: 20px;
}

.success-title {
  font-size: 24px;
  color: #67c23a;
  margin-bottom: 15px;
}

.success-text {
  font-size: 16px;
  margin-bottom: 10px;
}

.success-tip {
  color: #606266;
  margin-bottom: 30px;
}

.success-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.loading-container,
.empty-data {
  padding: 20px;
  text-align: center;
}

@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .search-input {
    width: 100%;
  }
  
  .farmer-item {
    width: 100%;
  }
  
  .selected-product-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .selected-product-image {
    margin: 0 0 15px;
  }
  
  .product-summary {
    flex-direction: column;
    text-align: center;
  }
  
  .product-summary-image {
    margin: 0 0 15px;
  }
  
  .product-summary-subtotal {
    margin-top: 10px;
  }
  
  .seller-info,
  .delivery-info,
  .payment-info {
    flex-direction: column;
  }
  
  .info-label {
    width: 100%;
    margin-bottom: 5px;
  }
}
</style> 